<template>
	<view class="subnav clearfix" style="margin:0">
		<u-sticky class="container__sticky">
			<view class="header index-header">
				<view class="logo-box">
					<view class="logo" v-if="website.webLog && website.webLog.url"><img :src="website.webLog.url" alt="" class="logo-img" /></view>
					<view class="bank"><img src="https://res.cloudinary.com/don15jt24/image/upload/v1709050350/1258_tawgx3.png" alt="" /></view>
				</view>
			</view>
		</u-sticky>
		<view style="width: 100%;" v-if="advsLb.list && advsLb.list.length">
			<u-swiper :list="advsLb.list" keyName="image" showTitle autoplay circular ></u-swiper>
		</view>
		<!-- 由于uView不支持直接嵌入script，您可能需要将JavaScript逻辑转移到Vue组件的methods或computed属性中 -->
		<view class="box news-box" style="margin:0">
			<view class="riqi">
				<!-- JavaScript逻辑需要转移 -->
				<text class="date-display">
					<b>今:</b>
					<span style="color: #FF0000;"><b>{{ solarMonth }}</b></span>
					<b>月</b>
					<span style="color: #FF0000;"><b>{{ solarDate }}</b></span>
					<b>日.</b>
					<span style="color: #FF0000;"><b>{{ weekdayString }}.</b></span>
					<text class="lunar-display">
						<b>农历:</b>
						<span style="color: #FF0000;">
							<b>{{ lunarMonth }}</b>
							月
							<b>{{ lunarDate }}</b>
							日.
						</span>
					</text>
					<text class="sha-direction">
						<b>煞</b>
						{{ location }}
						<b>正冲生肖:</b>
						<span style="color: #FF0000;">{{ animal }}</span>
					</text>
				</text>

				
			</view>
		</view>
		<view v-if="advs.list && advs.list.length">
			<view v-for="(item, inx) in advs.list" :key="inx" @click="toDetail(item)">
				<image :src="item.thumb.url" mode="heightFix" style="height:65px; margin-bottom: -16rpx; margin-top: 10rpx;"></image>
			</view>
		</view>
		<!-- 省略了部分重复结构，应用循环渲染 -->
		<view class="box pad" id="yxym" v-for="(vl, vk) in list" :key="vk">
			<view class="list-titletu"><image v-if="vl.thumb && vl.thumb.url" :src="vl.thumb.url" mode="widthFix"></image></view>

			<view class="box22 clearfix">
				<view class="dhsx22" v-for="(item, index) in vl['navsList']" :key="index" @click="toDetail(item)">
					<image v-if="item.thumb && item.thumb.url" :src="item.thumb.url"></image>
					<image v-else src="https://res.cloudinary.com/don15jt24/image/upload/v1708490056/%E8%B5%84%E6%BA%90_12mdpi_mzxudp.png"></image>
					<view class="item-view">
						<text class="item-text">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Footer部分 -->
		<view class="box pad">
			<view class="foot-img"><u-parse :content="website.footNode"></u-parse></view>
		</view>
	</view>
</template>

<script>
import { getNavs, getAdvsListByPos } from '@/api/cms.js';
import { getConfig } from '@/api/lottery.js';
import { TagLunarCal } from './TagLunarCal.js';

export default {
	data() {
		return {
			advsLb: {},
			list: [],
			advs: {},
			website: {},
			FIRSTYEAR: 1998,
			LASTYEAR: 2032,
			solarYear: new Date().getFullYear(),
			solarMonth: new Date().getMonth() + 1,
			solarDate: new Date().getDate(),
			weekdayString: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][new Date().getDay()],
			lunarMonth: '',
			lunarDate: '',
			location: '',
			animal: '',
			clock: '',
			LunarCal: [
				new TagLunarCal(27, 5, 3, 43, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 1),
				new TagLunarCal(46, 0, 4, 48, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1),
				new TagLunarCal(35, 0, 5, 53, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1),
				new TagLunarCal(23, 4, 0, 59, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(42, 0, 1, 4, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(31, 0, 2, 9, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0),
				new TagLunarCal(21, 2, 3, 14, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(39, 0, 5, 20, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(28, 7, 6, 25, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1),
				new TagLunarCal(48, 0, 0, 30, 0, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1),
				new TagLunarCal(37, 0, 1, 35, 1, 0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1),
				new TagLunarCal(25, 5, 3, 41, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1),
				new TagLunarCal(44, 0, 4, 46, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1),
				new TagLunarCal(33, 0, 5, 51, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(22, 4, 6, 56, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0),
				new TagLunarCal(40, 0, 1, 2, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0),
				new TagLunarCal(30, 9, 2, 7, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1),
				new TagLunarCal(49, 0, 3, 12, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1),
				new TagLunarCal(38, 0, 4, 17, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0),
				new TagLunarCal(27, 6, 6, 23, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1),
				new TagLunarCal(46, 0, 0, 28, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0),
				new TagLunarCal(35, 0, 1, 33, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0),
				new TagLunarCal(24, 4, 2, 38, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(42, 0, 4, 44, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1),
				new TagLunarCal(31, 0, 5, 49, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0),
				new TagLunarCal(21, 2, 6, 54, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1),
				new TagLunarCal(40, 0, 0, 59, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1, 0, 1),
				new TagLunarCal(28, 6, 2, 5, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0),
				new TagLunarCal(47, 0, 3, 10, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1),
				new TagLunarCal(36, 0, 4, 15, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1),
				new TagLunarCal(25, 5, 5, 20, 1, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0),
				new TagLunarCal(43, 0, 0, 26, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1),
				new TagLunarCal(32, 0, 1, 31, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0),
				new TagLunarCal(22, 3, 2, 36, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0)
			],
			SolarCal: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
			SolarDays: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365, 396, 0, 31, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335, 366, 397],
			AnimalIdx: ['马', '羊', '猴', '鸡', '狗', '猪', '鼠', '牛', '虎', '兔', '龙', '蛇'],
			LocationIdx: ['南.', '東.', '北.', '西.']
		};
	},
	onLoad() {
		this.initNavs();
		this.initAdvs();
		this.initConfig();
		this.calConv();
	},
	methods: {
		initNavs() {
			var map = {
				alias: ['DaoHangYi', 'DaoHangEr']
			};
			getNavs(map).then(res => {
				if (res.code === 200) {
					this.list = res.data.list;
				} else {
					uni.$u.toast(res.message);
				}
			});
		},
		toDetail(item) {
			if (item.bank == 1) {
				//#ifdef H5
				window.open(item.path);
				//#endif
				//#ifdef APP-PLUS
				uni.$u.route({ url: 'pages/index/web', params: { url: item.path } });
				//#endif
			} else if (item.bank == 3) {
				//下载
				//#ifdef H5
				window.open(item.path);
				//#endif
				//#ifdef APP-PLUS
				// uni.$u.route({url:'pages/index/web',params:{url:item.path}});
				//#endif
			} else if (item.bank == 0) {
				//#ifdef H5
				location.href = item.path;
				//#endif
				//#ifdef APP-PLUS
				uni.$u.route({ url: item.path });
				//#endif
			}
		},
		initAdvs() {
			var map = {
				alias: ['ShouYeBanner']
			};
			getAdvsListByPos().then(res => {
				if (res.code === 200) {
					
					res.data.list.forEach(vl => {
						vl.list.forEach(item => {
							item.bank = item.link_type;
							item.path = item.link_url;
							item.image = item.thumb.url;
						});
						
						if(vl.alias == 'ShouYeBanner') {
							this.advs = vl;
						}else if(vl.alias == 'LunBoTu'){
							this.advsLb = vl;
						}
					})
				} else {
					uni.$u.toast(res.message);
				}
			});
		},
		initConfig() {
			getConfig().then(res => {
				if (res.code === 200) {
					this.website = res.data.website;
				} else {
					uni.$u.toast(res.message);
				}
			});
		},
		getLeap(year) {
			if (year % 400 === 0) return 1;
			else if (year % 100 === 0) return 0;
			else if (year % 4 === 0) return 1;
			else return 0;
		},
		calConv() {
			const today = new Date();
			const solarYear = today.getFullYear();
			const solarMonth = today.getMonth() + 1;
			const solarDate = today.getDate();
			const FIRSTYEAR = 1998;
			const LASTYEAR = 2032;

			if (solarYear < FIRSTYEAR || solarYear > LASTYEAR) {
				console.error('年份超出计算范围');
				return;
			}

			let leap = this.getLeap(solarYear);
			let sm = solarMonth - 1;
			let solarDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			if (solarDate < 1 || solarDate > solarDays[sm]) {
				console.error('日期超出范围');
				return;
			}

			let acc = this.SolarDays[leap * 14 + sm] + solarDate;
			let y = solarYear - FIRSTYEAR;
			let lunarInfo = this.LunarCal[y];
			let kc = acc + lunarInfo.BaseKanChih;
			let Kan = kc % 10;
			let Chih = kc % 12;
			this.location = this.LocationIdx[kc % 4];
			this.animal = this.AnimalIdx[Chih];

			// 农历计算
			if (acc <= lunarInfo.BaseDays) {
				y--;
				lunarInfo = this.LunarCal[y];
			}

			let l1 = lunarInfo.BaseDays;
			for (let i = 0; i < lunarInfo.MonthDays.length; i++) {
				let l2 = l1 + lunarInfo.MonthDays[i] + 29;
				if (acc <= l2) {
					this.lunarMonth = i + 1;
					this.lunarDate = acc - l1;
					break;
				}
				l1 = l2;
			}

			let im = lunarInfo.Intercalation;
			if (im != 0 && this.lunarMonth > im) {
				this.lunarMonth--;
				if (this.lunarMonth == im) this.lunarMonth = -im;
			}
			if (this.lunarMonth > 12) this.lunarMonth -= 12;
		},

		updateClock() {
			const now = new Date();
			let hours = now.getHours();
			let minutes = now.getMinutes();
			let seconds = now.getSeconds();
			minutes = minutes < 10 ? '0' + minutes : minutes;
			seconds = seconds < 10 ? '0' + seconds : seconds;
			this.clock = hours + ':' + minutes + ':' + seconds;
			setTimeout(this.updateClock, 1000);
		}
	}
};
</script>

<style scoped>
.container__sticky {
	background-color: #ffffff;
	border-bottom: 1px solid #c0c0c0;
	margin-bottom: 10rpx;
	border-bottom-left-radius: 20rpx; /*左上角*/
	border-bottom-right-radius: 20rpx; /*右上角*/
	top: 0 !important;
}
.header.index-header {
	// height: 98px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

.header {
	// position: fixed;
	border-bottom: 1px solid #ccc;
	z-index: 99;
	width: 100%;
	max-width: 720px;
	background-image: linear-gradient(to right, #f1e8db, #ede3d4, #efe7da, #ede2d2, #e9e2d7, #e7dfd3, #f1e8db);
}

.header .logo-box {
	height: 50px;
}

.header .logo {
	float: left;
	height: 50px;
	margin-left: 0px;
}

.header .logo .logo-img {
	width: 208px;
	height: 50px;
}

.header .bank {
	float: right;
	position: relative;
	width: 90px;
	height: 50px;
}

.header .bank img {
	display: block;
	width: 85px;
	height: 50px;
	margin: 0 auto;
}

.content-box {
	text-align: center; /* 确保文本和图片居中 */
}

.item-image {
	width: 90px; /* 图片宽度自适应容器 */
	height: 90px; /* 图片宽度自适应容器 */
	border-radius: 5px; /* 可选的，根据需求添加圆角 */
}

.item-text {
	margin-top: 5px; /* 文本距离图片的间距 */
	width: 100%;
}

.subnav,
.box,
.pad,
.list-title,
.list-titletu,
.riqi,
.dhsx22,
.copyright {
	box-sizing: border-box;
}

.subnav {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	margin: 0;
}
.subnav > view {
	flex-grow: 1;
}

.box {
	margin: 10px 0;
	border-radius: 5px;
	overflow: hidden;
	max-width: 720px;
	background-image: linear-gradient(to right, #00be16, #03c71a, #04c11a, #02c719, #03b918, #04c31a, #00be16);
}

.pad {
	padding: 4px;
}

.list-title,
.list-titletu,
#yxym .list-title,
#yxym .list-titletu {
	height: 28px;
	line-height: 23px;
	font-size: 16pt;
	text-align: center;
	background: #fff;
	color: #000;
	font-weight: bold;
}

#yxym .list-title,
#yxym .list-titletu {
	background: linear-gradient(transparent, #f7f3f3);
	font-size: 26px;
	text-shadow: 0 0 10px #e5e5e5;
}

.riqi {
	font-size: 19pt;
	text-align: center;
	font-weight: bold;
	margin: 5px 0;
}

.dhsx22 {
	border-radius: 15px;
	margin: 5px;
	background: #00cc99;
}

.dhsx22 image {
	border-radius: 20px;
	width: 180px; /* Adapt based on screen size */
}

.dhsx22 view {
	margin: 8px 0;
}
.dhsx22 .item-view {
	width: 100%;
	color: #f7f3f3;
}

.box22 {
	display: flex;
	flex-wrap: wrap; /* 允许子元素换行 */
	justify-content: flex-start; /* 子元素在主轴（通常是水平方向）的对齐方式 */
	background-color: #fff;
}

.box22 .dhsx22 {
	flex: 1 1 auto; /* 根据需要调整，这里的设置意味着每个子项将会有相同的弹性基础大小，并且能够根据容器大小自动伸缩 */
	margin: 5px; /* 保持原有的外边距 */
	border-radius: 15px; /* 保持原有的圆角 */
	background: #00cc99; /* 保持原有的背景色 */
	text-align: center;
}

.yellow-area {
	background-color: #ffeb3b;
	padding: 20px;
	border-radius: 10px;
}

@media screen and (max-width: 650px) {
	.dhsx22 image {
		width: 130px;
		height: 130px;
	}

	.list-titletu {
		height: 58px;
	}
}

/* Simplified media queries for responsiveness */
@media screen and (max-width: 610px) {
	.riqi {
		font-size: 15pt;
	}

	.pad,
	#yxym .list-title {
		padding: 2px;
		font-size: 20px;
	}

	.box22 view image {
		width: 110px;
		height: 110px;
	}

	.list-titletu {
		height: 53px;
	}
}

@media screen and (max-width: 505px) {
	#yxym .list-title {
		font-size: 18px;
	}

	.riqi {
		font-size: 12pt;
	}

	.box22 view image {
		width: 100px;
		height: 100px;
		margin-top: 8px;
	}

	.list-titletu {
		height: 44px;
	}
}
</style>
